<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
		<!--搜索开始-->
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="searchFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">交易订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="projectid" id="projectid" autocomplete="off" class="layui-input">
                            </div>
                        </div>
					</div>
					<div class="layui-form-item">
                        <div class="layui-block" style="text-align: center;">
                            <a class="layui-btn " lay-submit=""  lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
							<a class="layui-btn layui-btn-warm" lay-submit="" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-clean-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
		<!--搜索结束-->
		
		<!--表格开始-->
        <table class="layui-hide" id="salesbackTable" lay-filter="salesbackTable"></table>
		<script type="text/html" id="salesbackTableBar">
		    <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="back">退货</a>
		</script>
		
		<!--表格结束-->

        <!--退货的弹出层 开始-->
		<div id="backDiv" style="display: none;padding: 0.3125rem">
			<form method="post" class="layui-form layui-form-pane" lay-filter="backDataFrm" id="backDataFrm">
				  <div class="layui-form-item">
					  <div class="layui-form-inline">
						<label class="layui-form-label">退货数量</label>
						<div class="layui-input-inline">
                            <input type="hidden" name="id" id="id" />
							<input type="hidden" name="goodsid" id="back_goodsid" />
                            <input type="hidden" name="customerid"/>
							<input type="hidden" name="projectid" id="projectid" />
                            <input type="hidden" name="memberprice" id="memberprice"/>
							<input type="hidden" name="price" id="price" />
							<input type="text" name="number_back" id="number_back" placeholder="请输入退货数量(必填)" onchange="changeEvent();" lay-verify="required|number|checkgoodsnumber" autocomplete="off" class="layui-input">
						</div>
						
						<div class="layui-form-inline">
							<label class="layui-form-label">当前购买数</label>
							<div class="layui-input-inline">
								<input type="text" name="number" id="number_now" autocomplete="off" class="layui-input" disabled="disabled" style="background: #ccc;">
							</div>
						</div>
					</div>
				   </div>


                   <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">退货总价</label>
                            <div class="layui-input-inline">
                                <input type="text" name="totalbackprice" id="totalprice" autocomplete="off" class="layui-input" disabled="disabled" style="background: rgb(204, 204, 204);">
                            </div>
                        </div>
                   </div>
                   

				   <div class="layui-form-item">
					<div class="layui-form-inline">
					  <label class="layui-form-label">是否会员</label>
					  <div class="layui-input-inline">
						  <input type="text" name="member" id="member" disabled="disabled"  style="background: rgb(204, 204, 204)" autocomplete="off" class="layui-input">
					  </div>
					  
                      <div class="layui-form-inline">
                        <label class="layui-form-label">支付类型</label>
                        <div class="layui-input-inline">
                            <input type="text" name="paytype" id="paytype" disabled="disabled"  style="background: rgb(204, 204, 204)" autocomplete="off" class="layui-input">
                        </div>
				  </div>
				 </div>

				  <div class="layui-form-item">
						<label class="layui-form-label">退货原因</label>
						<div class="layui-input-block">
						  <textarea placeholder="请输入退货原因(选填)" name="remark" class="layui-textarea"></textarea>
						</div>
				   </div>
				  <div class="layui-form-item">
						<div class="layui-input-block" style="text-align: left;">
							<a class="layui-btn " lay-submit=""  lay-filter="doBack"><label class="layui-icon layui-icon-release"></label>提交</a>
						</div>
				   </div>
			</form>
		</div>
		<!--退货的弹出层 结束-->

    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>

<script>

    function changeEvent(){
        if(Number($("#customerid").val())){
            $("#totalprice").val($("#memberprice").val()*$("#number_back").val());
        }else{
            $("#totalprice").val($("#price").val()*$("#number_back").val());
        }
    }

    layui.use(['form', 'table','laydate','layer'], function () {
        var form = layui.form;
        var table = layui.table;
		var layer=layui.layer;

      var tableIns=table.render({
            elem: '#salesbackTable',
            url: api+'sales/startSales',
            text: {none: "请输入交易单号进行退货"},
			cellMinWidth:true,
            cols: [[
                {field: 'projectid', title: '交易单号', align: "center"},
                {field: 'goodsname',  title: '商品名称', align: "center"},
                {field: 'size',  title: '规格', align: "center"},
                {field: 'salestime',  title: '销售时间',width: 120 , align: "center"},
                {field: 'number',  title: '数量', align: "center"},
                {field: 'price',  title: '价格', align: "center"},
                {field: 'memberprice',  title: '会员价', align: "center"},
                {field: 'customername',  title: '会员名称', align: "center", width: 120 ,templet:function(d){
                    if(d.customerid == 0){
                        return '<span class="layui-badge layui-bg-blue">'+d.customername+'</span>';
                    }else{
                        return '<span class="layui-badge layui-bg-green">'+d.customername+'</span>';
                    }
                }},
                {field: 'paytype',  title: '支付类型', align: "center"},
                {field: 'operateperson',  title: '收银人', align: "center"},
                {title: '操作', templet: '#salesbackTableBar', fixed: "right", align: "center",width:100}
            ]],
            // where:cols,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
			var params= $("#searchFrm").serialize()
            if (Number($("#projectid").val())!=0){
                //执行搜索重载
                table.reload('salesbackTable', {
                    page: {
                        curr: 1
                    }
                    ,url:api+'sales/loadAllSales?'+params
                });
            }
            return false;
        });


		//监听行数据的事件
        table.on('tool(salesbackTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'back') {
                openBackDiv(data);
            }
        });

        var mainIndex;
        //退货操作弹窗
        function openBackDiv(data){
            mainIndex=layer.open({
				type:1,
				title:"【"+data.goodsname+'】的退货',
				content:$("#backDiv"),
				area:['700px','400px'],
				success:function(index){
					//重置表单
					$("#backDataFrm")[0].reset();
					form.val("backDataFrm",data);
                    if(Number(data.customerid)!=0){
                        form.val("backDataFrm",{member: "是"});
                    }else{
                        form.val("backDataFrm",{member: "否"});
                    }
					form.val("backDataFrm",{remark:''});
				}
			});	
        }


        //提交数据
		form.on("submit(doBack)",function(data){
			var params= $("#backDataFrm").serialize();
            params += "&paytype="+$("#paytype").val();
			$.post(api+"salesback/addSalesBack",params, function(res){
				layer.msg(res.msg);
				if(res.code==200){
					tableIns.reload();
				}
				layer.close(mainIndex);
			})
			return false;
		});

        //监听重置
        form.on("submit(data-clean-btn)",function(data){
            tableIns.reload({
                url:api+"sales/startSales",
            });
        })

        //自定义校验方式
		form.verify({
			//退货校验
			checkgoodsnumber: function(value, item){ //value：表单的值、item：表单的DOM对象
		    var str;
			var goodsid0=$("#number_now").val();
			if(value <= 0){
                str = "当前退货数至少为1";
            }else if(Number(value) > Number(goodsid0)){
                str = "当前退货数量不可以超过购买数量";
            }
			return str;
		  	}})

    });
</script>
<script>

</script>

</body>
</html>